<template>
  <div class="q-pa-md">
    <div class="q-gutter-y-md" style="max-width: 600px">
      <q-card>
        <q-tabs
          v-model="tab"
          dense
          class="text-grey"
          active-color="primary"
          indicator-color="primary"
          align="justify"
          narrow-indicator
        >
          <q-tab name="mails" label="密码登录" />
          <q-tab name="alarms" label="手机号登录" />
        </q-tabs>

        <q-separator />

        <q-tab-panels v-model="tab" animated>
          <q-tab-panel name="mails">
            <div class="text-h6">
              <q-input color="teal" filled v-model="text" label="用户名">
                <template v-slot:append>
                  <q-icon name="event" />
                </template>
              </q-input>
              <q-input color="teal" v-model="password" filled :type="isPwd ? 'password' : 'text'"
                label="密码">
                <template v-slot:append>
                  <q-icon
                    :name="isPwd ? 'visibility_off' : 'visibility'"
                    class="cursor-pointer"
                    @click="isPwd = !isPwd"
                  />
                </template>
              </q-input>
            </div>
          </q-tab-panel>
          <q-tab-panel name="alarms">
            <div class="text-h6"></div>
          </q-tab-panel>
        </q-tab-panels>
      </q-card>
    </div>
  </div>
</template>

<script>
export default {
  props: {
  },
  data() {
    return {
      tab: 'mails',
      text: '',
      password: '',
      isPwd: true,
    };
  },
  created() {

  },
  mounted() {

  },
  methods: {

  },
};
</script>

<style scoped lang="stylus">

</style>
